
<template>
  <div class="title" v-if="Object.keys(goodsInfo).length!==0">
    <span>{{goodsInfo.title}}</span>
    <div class="price">
      <span class="newprice">{{'￥'+goodsInfo.realPrice}}&nbsp;&nbsp;</span>
      <span class="oldPrice">{{goodsInfo.oldPrice}}</span>
      <div class="discountlogo">优惠价</div>
    </div>
    <div class="info-other">
      <span class="volume">{{goodsInfo.columns[0]}}</span>
      <span class="collect">{{goodsInfo.columns[1]}}</span>
      <span class="sales-return">{{goodsInfo.services[0].name}}</span>
    </div>
    <div class="services">
      <span class="return">
        <img v-if="goodsInfo.services[2].icon === undefined" :src="goodsInfo.services[2].icon">
        {{goodsInfo.services[2].name}}
      </span>

      <span class="delivery">
        <img v-if="goodsInfo.services[2].icon === undefined"  :src="goodsInfo.services[3].icon">
        {{goodsInfo.services[3].name}}
      </span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DetailBaseInfo",
    props: {
      goodsInfo: {
        type: Object,
        default() {
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .title {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .title > span {
    font-size: 18px;
    font-weight: bold;
  }

  .price {
    margin-top: 8px;
    position: relative;
  }

  .newprice {
    color: #ff5777;
    font-size: 25px;
    font-weight: bold;
  }

  .oldPrice {
    text-decoration: line-through;
    font-size: 18px;
    font-weight: bold;
  }

  .discountlogo {
    position: absolute;
    color: white;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #ff5777;
    border-radius: 30px;
    top: -10px;
    left: 100px;
    opacity: 0.6;
    transform: rotate(15deg);
  }

  .info-other {
    margin-top: 20px;
    text-align: center;
  }

  .info-other span:not(:last-child) {
    margin-right: 70px;
  }

  .services {
    box-sizing: content-box;
    margin-top: 15px;
    border-top: 1px solid #e6e6e6;
    border-bottom: 5px solid #e6e6e6;
    height: 60px;
    /*background-color: #ff5777;*/
    font-size: 15px;
    line-height: 60px;
    text-align: center;
  }

  .services img {
    width: 15px;
  }

  .services .return {
    margin-right: 35%;
  }

</style>